<template>
	<view class="water_top">
		<view class="water-text">{{ watermarkText }}</view>
		<view class="water-text">{{ watermarkText }}</view>
		<view class="water-text">{{ watermarkText }}</view>
		<view class="water-text">{{ watermarkText }}</view>
		<view class="water-text">{{ watermarkText }}</view>
		<view class="water-text">{{ watermarkText }}</view>
		<view class="water-text">{{ watermarkText }}</view>
		<view class="water-text">{{ watermarkText }}</view>
	</view>
</template>

<script setup>
import { useStore } from 'src/plugins/pinia';
const { user } = useStore();
const props = defineProps({
	watermarkText: {
		type: String,
		default: ''
	}
});
const watermarkText = ref('');
function drowsyUserinfo(nameText) {
	const ctx = uni.createCanvasContext('myCanvas');
	ctx.rotate((20 * Math.PI) / 180); //设置文字的旋转角度，角度为45°；
	//对斜对角线以左部分进行文字的填充
	//用for循环达到重复输出文字的效果，这个for循环代表纵向循环
	for (let j = 1; j < 10; j++) {
		ctx.beginPath();
		ctx.setFontSize(16);
		ctx.setFillStyle('rgba(0,155,169,.5)');
		ctx.fillText(nameText, 0, 50 * j);
		for (let i = 1; i < 10; i++) {
			//这个for循环代表横向循环
			ctx.beginPath();
			ctx.setFontSize(15);
			ctx.setFillStyle('rgba(0,155,169,.5)');
			ctx.fillText(nameText, 180 * i, 150 * j);
		}
	}
	//两个for循环的配合，使得文字充满斜对角线的左下部分
	//对斜对角线以右部分进行文字的填充逻辑同上
	for (let j = 0; j < 10; j++) {
		ctx.beginPath();
		ctx.setFontSize(16);
		ctx.setFillStyle('rgba(0,155,169,.5)');
		ctx.fillText(nameText, 0, -50 * j);
		for (let i = 1; i < 10; i++) {
			ctx.beginPath();
			ctx.setFontSize(16);
			ctx.setFillStyle('rgba(0,155,169,.5)');
			ctx.fillText(nameText, 180 * i, -150 * j);
		}
	}
	ctx.draw();
}
watermarkText.value = user.userInfo.userName;
watch(
	watermarkText,
	(msg, oldMsg) => {
		if (msg) drowsyUserinfo(msg);
	},
	{
		immediate: true
	}
);
</script>

<style lang="less">
.water_top {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/* background: #999; */
	transform: rotate(-10deg);
	/* opacity: 0.9; */
	z-index: 9999999999;
	pointer-events: none;
}

.water-text {
	float: left;
	width: 375rpx;
	color: rgba(169, 169, 169, 0.2);
	text-align: center;
	font-size: 15px;
	margin: 120rpx 0;
}
</style>
